<template>
  <div>
    <input
      class="uploadFile"
      type="file"
      ref="fileInput"
      @change="uploadFile($event)"
      accept=".docx, .doc,.xls,.xlsx"
      hidden
    />
    <div
      class="upload_pictures shou"
      @click="triggerFileInput"
      @dragover.prevent="handleDragOver"
      @dragleave.prevent="handleDragLeave"
      @drop.prevent="handleDrop"
      :class="{ 'drag-active': isDragging }"
    >
      <div class="upload_btn">
        <div class="upload_txt">
          <img class="upload_img" src="@/assets/images/upload/yun.png" alt="" />
          <div class="upload_txt_p">
            {{ isDragging ? '松开鼠标上传文件' : '点击或拖拽文件到此处上传' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    maxFileSize: {
      type: Number,
      default: 5, // 默认最大文件大小为5MB
    },
  },
  data() {
    return {
      isDragging: false,
      fileLists: [],
    };
  },
  methods: {
    // 触发文件选择
    triggerFileInput() {
      this.$refs.fileInput.click();
    },

    // 拖拽相关方法
    handleDragOver() {
      this.isDragging = true;
    },
    handleDragLeave() {
      this.isDragging = false;
    },
    handleDrop(e) {
      this.isDragging = false;
      const files = e.dataTransfer.files;
      if (files.length === 0) return;
      this.validateAndUpload(files[0]);
    },

    // 文件选择事件
    uploadFile(event) {
      const file = event.target.files[0];
      if (!file) return;
      this.validateAndUpload(file);
      event.target.value = ""; // 重置input
    },

    // 统一校验和上传逻辑
    validateAndUpload(file) {
      // 校验文件大小
      const fileSize = file.size / 1024 / 1024; // MB
      if (fileSize > this.maxFileSize) {
        this.$message.warning({
          message: `文件大小不能超过${this.maxFileSize}MB`,
          showClose: true,
        });
        return;
      }

      // 校验文件类型
      const validExtensions = ['.docx', '.doc', '.xls', '.xlsx'];
      const fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
      if (!validExtensions.includes(fileExt)) {
        this.$message.warning({
          message: '仅支持上传 .docx, .doc, .xls, .xlsx 文件',
          showClose: true,
        });
        return;
      }

      // 上传文件
      this.processUpload(file);
    },

    // 处理上传
    processUpload(file) {
      const formData = new FormData();
      formData.append("file", file);

      if (file.name.includes(".xls") || file.name.includes(".xlsx")) {
        this.$emit("uploadFiles", formData);
      } else {
        this.$emit("uploadWords", formData);
      }
    }
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
.uploadFile {
  display: none;
}
.upload_pictures {
  width: 100%;
  height: 248px;
  background: #f5f7f9;
  border-radius: 8px;
  border: 1px dashed #cfcfcf;
  cursor: pointer;
}
.upload_btn {
  width: 100%;
  height: 248px;
  background: #f5f7f9;
  border-radius: 8px;
  border: 1px dashed #cfcfcf;
}
.upload_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  user-select: none;
}
.upload_img {
  margin-top: 97px;
  width: 40px;
  height: 25px;
}
.upload_txt_p {
  margin-top: 10px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: center;
  text-decoration-line: underline;
}

/* 新增拖拽状态样式 */
.drag-active {
  border-color: #1890ff !important;
  background-color: rgba(24, 144, 255, 0.1) !important;
}
</style>
